<template>
    <div>
        <el-table
            :data="tableData"
            stripe
            border
            style="width: 100%">
            <el-table-column
            prop="create"
            label="申请时间"
            width="180">
            </el-table-column>
            <el-table-column
            prop="kehu_name"
            label="客户名称"
            width="">
            </el-table-column>

            <el-table-column
            prop="tel"
            label="电话"
            width="160">
            </el-table-column>

            <el-table-column
            prop="email"
            label="邮箱"
            width="300">
            </el-table-column>

            <el-table-column
            label="操作"
            width="100">
            <template slot-scope="scope">
                <el-button @click="showAddDialog(scope.row)"  type="text" size="small">启用</el-button>
            </template>
            </el-table-column>
        </el-table>
        <el-dialog
          title="启用账户"
          :visible.sync="applyDialogVisable"
          :close-on-click-modal="false"
          width="30%">
           <el-form  label-width="70px" :model="addPeopleForm" size="mini">
                <el-form-item label="客户ID">
                    <el-input v-model="addPeopleForm.kehu_id" width="100%"></el-input>
                </el-form-item>
                <el-form-item label="客户名称">
                    <el-input v-model="addPeopleForm.kehu_name"  width="100%"></el-input>
                </el-form-item>
                <el-form-item label="联系人">
                    <el-input v-model="addPeopleForm.contact"  width="100%"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="addPeopleForm.tel"  width="100%"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="addPeopleForm.email"  width="100%"></el-input>
                </el-form-item>
                <el-form-item label="账号">
                    <el-input v-model="addPeopleForm.account.username"  width="100%"></el-input>
                </el-form-item>
            </el-form>
          <span slot="footer">
            <el-button @click="applyDialogVisable = false">取 消</el-button>
            <el-button type="primary" @click="passApply">启 用</el-button>
          </span>
        </el-dialog>
        



    </div>
</template>
<script>
export default {
    name: 'customer',
    data () {
        return {
            applyDialogVisable: false,
            tableData: [],
            totalCount: 0,
            curIndex: 1,
            addPeopleForm: {
                id:'',
                kehu_id: '',
                kehu_name: '',
                contact: '',
                tel: '',
                email: '',
                account: {
                    id:'',
                    username: ''
                }
            },
        }
    },
    mounted () {
        this.getData();
    },
    methods: {
        openDetails(row){
            // row, event, column 三个参数
            this.$router.push({
                path: 'customerDetail',
                query: {
                    id: row.id
                }
            })
        },
        getData () {
            this.$axios.get('/api/apply/').then(res => {
              console.log()
                if (res.status === 200 && res.data.length > 0) {
                    this.tableData = res.data;
                }else{
                    this.tableData = [];
                }
            }).catch((error)=>{
                console.log(error);
                console.log('查无资源');
                this.tableData = [];
            })
        },
        showAddDialog(row){
          this.applyDialogVisable = true;
          this.addPeopleForm.email = row.email;
          this.addPeopleForm.kehu_name = row.kehu_name;
          this.addPeopleForm.tel = row.tel;
          this.addPeopleForm.apply_id = row.id;
          console.log(row);
        },
        passApply(){
          if(this.addPeopleForm.account.username){
            this.$axios.post('/api/kehu/',{...this.addPeopleForm}).then(res => {
              if (res.status === 201 && res.data.account.id) {
                this.applyDialogVisable = false;
                  this.$router.go(0);
              }else{
                  this.$message({
                      message: '创建账户失败',
                      type: 'error'
                  })
              }
            })
          }else{
            this.$message({
              message:'请录入用户名',
              type:'info'
            })
          }
        }

    },
}
</script>
<style scoped lang="scss">
.rightWay {
    float: right;
}
.rightMargin {
    margin-right: 50px;
}
.topMsg {
    margin-bottom: 10px;
}
</style>


